<template>
  <div class="live-about">
    <div class="live-about-basic">
      <div class="live-about-basic-content">
        <p>
          流量余额:
          <span>{{ flowBalance }}</span> G
        </p>
        <p>
          今日使用:
          <span>{{ dayUsed }}</span> G
        </p>
        <!--<p>您的云直播服务将于{{ utilTime }}天后过期，请尽快续费，以免影响使用</p>-->
      </div>
    </div>
    <div class="live-about-chart">
      <div class="live-about-chart-header">
        <div class="live-about-chart-header-left">
          直播峰值趋势
        </div>
      </div>
      <div class="live-about-chart-main">
        <bar-chart id="live-bar" height="500px" width="100%" class-name="msg-bar"/>
      </div>
    </div>
  </div>
</template>

<script>
  import BarChart from './bar'
  import {getCloudFlowStatistics} from "@/api/cloud/cloud_video"; // 数据接口
  import {getTenantId} from '@/utils/auth';

  export default {
    components: {
      BarChart
    },
    data() {
      return {
        flowBalance: 0,
        dayUsed: 0
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        getCloudFlowStatistics(getTenantId()).then(response => {
          if (response.data) {
            this.flowBalance = response.data.flowBalance;
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .live-about {
    &-basic {
      width: 100%;
      padding-bottom: 30px;
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden;

      &-header {
        font-size: 16px;
        padding: 10px 20px;
        border-bottom: 1px solid #ddd;
        background-color: #fafafa;
        margin-bottom: 10px;

        .el-button {
          span {
            font-size: 18px;
          }
        }
      }

      &-content {
        p {
          margin-left: 50px;
          margin-top: 30px;
          font-size: 16px;
        }

        p:first-child {
          span {
            font-size: 24px;
            color: #409eff;
          }
        }

        p:nth-child(2) {
          margin-bottom: 0;

          span {
            color: #666 !important;
            font-size: 16px;
            padding-left: 10px !important;
          }
        }

        p:last-child {
          margin-top: 5px;
          color: #a94442;
          font-size: 15px;
        }
      }
    }

    &-chart {
      width: 100%;
      padding-bottom: 30px;
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden;
      margin: 20px 0;

      &-header {
        font-size: 16px;
        padding: 0 20px;
        border-bottom: 1px solid #ddd;
        background-color: #fafafa;
        margin-bottom: 10px;
        overflow: hidden;

        &-left {
          float: left;
          height: 36px;
          line-height: 36px;
        }

        &-right {
          float: right;
        }
      }

      &-main {
        width: 100%;
        padding: 0px 50px;

        .msg-bar {
          margin: auto;
        }
      }
    }

    .live-about-basic-content {
      margin-top: 30px;
    }
  }
</style>
